<template>
  <div>
    <nav class="nav-flex">
      <div :class="'Logo_Div '+TopCls">
        <div class="Img_Div" @click="$router.push('/Dashboard/Default')">
          <span class="Logo_Name">景深HR</span>
        </div>
        <div hidden :class="'LogoIcon '+TopCls">
          <!-- <i class="el-icon-check"></i> -->
          <span>HR</span>
        </div>
      </div>
      <div class="header-check CloseIcon" @click="$store.commit('SetIsCollapse')">
        <i :class="+$store.state.IsCollapse==false?'el-icon-s-fold':'el-icon-s-unfold'"></i>
      </div>
      <div class="header-ul">
        <ul>
          <li>
            <i class="el-icon-bell"></i>
          </li>
          <li>
            <i class="el-icon-message"></i>
          </li>
          <li>
            <i class="el-icon-s-flag"></i>
          </li>
          <li class="ImgLi">
            <div>
              <el-avatar size="small" :src="'data:image/jpeg;base64,'+$store.state.UserInfo.ImageData">
              </el-avatar>
              <p class="ImgP">
                {{$store.state.UserInfo.FullName}}
              </p>
            </div>
            <div class="ImgInfo">
              <div class="Top">
                <el-avatar :size="80" :src="'data:image/jpeg;base64,'+$store.state.UserInfo.ImageData">
                </el-avatar>
                <p>
                  {{$store.state.UserInfo.FullName}}
                </p>
              </div>
              <div class="ImgInfo_Footer">
                <div style="float:left;">
                  <el-button size="small" @click="$router.push('/User/Profile')">个人中心</el-button>
                </div>
                <div style="float:right">
                  <el-button type="danger" @click="$router.push('/Login')" size="small">退出登陆</el-button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>
<style lang="scss" scoped>
//头部-右侧ul-div样式
.header-ul {
  margin-left: auto;
  padding-right: 20px;

  ul {
    li {
      float: left;
      &:hover {
        cursor: pointer;
      }
      margin-right: 25px;
    }
  }
  .ImgLi {
    height: 20px;
    padding-top: 10px;

    .ImgP {
      line-height: 35px;
      float: right;
      padding-left: 10px;
      //padding-right: 20px;
    }
    &:hover {
      .ImgInfo {
        display: block;
      }
    }

    .ImgInfo {
      position: absolute;
      right: 35px;
      margin-top: -5px;
      height: 200px;
      width: 250px;
      background: white;
      border: 1px solid #dcdfe6;
      text-align: center;
      //padding-top: 10px;
      display: none;
      .Top {
        padding-top: 10px;
        background: #0059a9;
        height: 130px;
      }
      p {
        line-height: 0px;
      }
      .ImgInfo_Footer {
        position: relative;
        //margin-top: 40px;

        padding: 0px 10px 0 10px;
      }
    }
  }
}
//头部缩放、隐藏侧边栏开关
.header-check {
  padding-left: 20px;
  cursor: pointer;
}
//nav 弹性盒子
.nav-flex {
  display: flex;
  justify-content: flex-start;
}
//头部 logodiv
.Logo_Div {
  width: 220px;
  background: #555299 !important;
  opacity: 1;
  height: 60px;
  .Img_Div {
    padding-left: 55px;
  }
  //logo文字
  .Logo_Name {
    font-size: 24px;
  }
  &:hover {
    cursor: pointer;
  }
}
.TopHidd {
  transition: all 0.4s;
  width: 65px;
  .Img_Div {
    display: none;
  }
  display: block;
}
.LogoIcon {
  padding-left: 20px;
  font-size: 22px;
}
.TopShow {
  transition: width 0.4s;
  width: 220px;
  overflow: hidden;

  .Img_Div {
    display: block;
  }
}
.TopShow2 {
  width: 220px;
  .Img_Div {
    display: block;
  }
}
.CloseIcon {
  transition: all 0.7s;
}
</style>
<script>
export default {
  data () {
    return {
      TopCls: ""
    }

  },
  watch: {
    '$store.state.IsCollapse' (e) {
      if (e) {
        //显示
        this.TopCls = "TopHidd";
      } else {
        //隐藏
        this.TopCls = "TopShow";
      }
    }
  }
}
</script>
